<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>投诉报修</el-breadcrumb-item>
                    <el-breadcrumb-item>预定服务</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">

                <el-form-item  label="业主姓名:" prop="userName">
                    <el-input  placeholder="请输入业主姓名" style="width:200px;" v-model="ruleForm.userName"></el-input>
                </el-form-item>

                <el-form-item  label="联系电话:"  prop="phone">
                    <el-input  placeholder="请输入联系电话" style="width:200px;" v-model="ruleForm.phone"></el-input>
                </el-form-item>

                <el-form-item label="单 元 号"  prop="houseUnit">
                    <el-select
                            style="width:200px;"
                            v-model="ruleForm.houseUnit"
                            ref="ruleForm.houseUnit"
                            clearable="true"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入单元号"
                            :remote-method="remoteMethod1"
                            @visible-change="visibleChange"
                            :loading="loading">
                        <el-option
                                v-for="item in options1"
                                :key="item.value1"
                                :label="item.label1"
                                :value="item.value1">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="房  间  号"  prop="houseName" >
                    <el-select
                            style="width:200px;"
                            v-model="ruleForm.houseName"
                            ref="ruleForm.houseName"
                            clearable="true"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入房间号"
                            :remote-method="remoteMethod2"
                            @visible-change="visibleChange"
                            :loading="loading">
                        <el-option
                                v-for="item in options2"
                                :key="item.value2"
                                :label="item.label2"
                                :value="item.value2">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="活动时间" required>
                    <el-date-picker
                            v-model="ruleForm.sTime"
                            ref="ruleForm.sTime"
                            prop="sTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>



                <el-form-item label="服务类型"  prop="serviceType" >
                    <template>
                        <el-select v-model="ruleForm.serviceType" style="width:200px;" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="投诉详情" prop="requireDetail">
                    <el-input  style="width:400px;"   type="textarea"
                               placeholder="请输入内容"
                               :autosize="{ minRows: 4, maxRows: 10}"
                               maxlength="200"
                               show-word-limit v-model="ruleForm.requireDetail">

                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
	export default {
		data() {
			return {

				list: [],
				list1: [],
				loading: false,
				allOrds: [],
				allOrds1: [],
				options1:[],
				options2:[],
				options: [{
					value: '0',
					label: '家电维修'
				}, {
					value: '1',
					label: '代送快递'
				},{
					value: '2',
					label: '房屋装修'
				},{
					value: '3',
					label: '家居清理'
				},{
					value: '4',
					label: '提醒服务'
				},{
					value: '5',
					label: '水电维修'
				},{
					value: '6',
					label: '其他'
				}],
				ruleForm: {
					userName: '',
					phone: '',
					houseName: '',
					houseUnit:'',
					sTime:'',
					serviceType:'',
					requireDetail: ''
				},
				rules: {
					userName: [
						{ required: true, message: '请选择姓名', trigger: 'blur' }
					],
					phone: [
						{ required: true, message: '请选择电话号码', trigger: 'blur' }
					],
					serviceType: [
						{ required: true, message: '请选择活动区域', trigger: 'change' }
					],
					houseName: [
						{ required: true, message: '请选择房屋号', trigger: 'blur' }
					],
					houseUnit: [
						{ required: true, message: '请选择单元号', trigger: 'blur' }
					],
					rTime: [
						{ type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }
					],


					requireDetail: [
						{ required: true, message: '请填写投诉详情', trigger: 'blur' }
					]
				},
				formLabelWidth: '120px'
			};
		},
		mounted(){
			this.initData();

		},
		methods: {
			async initData() {
				//远程搜索房间名和单元名
				const {data: resp} = await this.$http.get('/repair/getUnit')
				//设置的房间名和单元名
				resp.data.forEach((item, index) => {
					this.allOrds[index]=resp.data[index].houseUnit
					this.allOrds1[index]=resp.data[index].houseName
				})
				console.log(this.allOrds)
				resp.data.forEach((item1, index1) => {
					this.list[index1]={"value1":this.allOrds[index1],"label1":this.allOrds[index1]}

				})
				resp.data.forEach((item2, index2) => {

					this.list1[index2]={"value2":this.allOrds1[index2],"label2":this.allOrds1[index2]}
				})
				console.log(this.list1)
				this.options1=this.list.slice(0, 10);
				this.options2=this.list1.slice(0, 10);
				this.list.forEach((item) => {
					this.$refs["ruleForm.houseUnit"].cachedOptions.push({
						currentLabel: item.label1,
						currentValue: item.value1,
						label: item.label1,
						value: item.value1,
					});
				});




			},

			remoteMethod1(query) {
				if (query !== "") {
					// 展示匹配的前10条
					this.options1 = this.list
						.filter((item) => {
							return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
						})
						.slice(0, 10);
				} else {
					// 展示10条
					this.options1 = this.list.slice(0, 10);

				}
			},
			remoteMethod2(query) {
				if (query !== "") {
					// 展示匹配的前10条
					this.options2 = this.list1
						.filter((item) => {
							return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
						})
						.slice(0, 10);
				} else {
					// 展示10条
					this.options2 = this.list1.slice(0, 10);
				}
			},
			visibleChange(value) {
				if (!value) {
					// 展示10条
					this.options1 = this.list.slice(0, 10);
					this.options1 = this.list1.slice(0, 10);
				}
			},

            //提交表单
			submitForm(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						console.log(this.ruleForm)
						const {data: resp} = await this.$http.post('/servicesTable/addServices', this.ruleForm)
						console.log(resp)
                        if(resp.code==200){

							this.$router.push('/myservice')
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

